<template>
	<div class="flowContainer" style="height: 100%">
		<Flow v-if="processInfo.processVersionId" :id="processInfo.processVersionId"
			  :pluginConfig="pluginConfig"
			  :toolbarConfig="props.toolbarConfig"
			  :componentsViewConfig="props.componentsViewConfig"
			  :floatToolbarViewConfig="props.floatToolbarViewConfig"
			  :nodePropertiesConfig="props.nodePropertiesConfig"
			  :childFlowFlag="props.childFlowFlag"
			  :initCallBack="props.initCallBack"
			  ref="flowRef"></Flow>


		<a-modal :closable="false" v-model:open="versionDiag.visible" width="300px">
			<a-form :model="versionDiag">
				<a-form-item label="版本">
					<a-input
						v-model:value="versionDiag.processVersion"
						:disabled="versionDiag.id != null"
						autocomplete="off"
					></a-input>
				</a-form-item>
				<a-form-item label="描述">
					<a-input v-model:value="versionDiag.description" autocomplete="off"></a-input>
				</a-form-item>
			</a-form>
			<template #footer>
				<a-space>
					<a-button @click="versionDiag.visible = false">取 消</a-button>
					<a-button type="primary" @click="save">确 定</a-button>
				</a-space>
			</template>
		</a-modal>


		<a-modal :closable="false" v-model:open="viewConfig.viewFlag" width="800px" height="800px">
			<Flow v-if="viewConfig.frontFile&&viewConfig.viewFlag" :file="viewConfig.frontFile"
				  :pluginConfig="pluginConfig"
				  :toolbarConfig="props.toolbarConfig"
				  :componentsViewConfig="props.componentsViewConfig"
				  :floatToolbarViewConfig="props.floatToolbarViewConfig"
				  :nodePropertiesConfig="props.nodePropertiesConfig"
				  :childFlowFlag="props.childFlowFlag"
				  :initCallBack="props.initCallBack"
				  ref="flowRef"></Flow>
		</a-modal>
	</div>
</template>

<script setup>
import {getCurrentInstance, h, onMounted, ref, watch} from "vue";
// import api from "@/request/apis.js";
import 'jsoneditor/dist/jsoneditor.min.css';
import Flow from '@/views/process/engine/index.vue'
import {useRouter} from 'vue-router'
import processVersionApi from "@/api/process/processVersionApi";
import {message} from 'ant-design-vue'
import processVersionContentApi from "@/api/process/processVersionContentApi";

const props = defineProps(["id", "toolbarConfig", "initCallBack", "childFlowFlag", "componentsViewConfig", "nodePropertiesConfig", "floatToolbarViewConfig"]);


const pluginConfig = ref({
	contextMenu: {
		selectionMenu: [
			{
				text: '另存为',
				callback({edges, nodes}) {
					versionDiag.value = {}
					versionDiag.value.frontFile = {
						edges, nodes
					}
					versionDiag.value.visible = true;
				},
			},
			{
				text: '预览',
				callback({edges, nodes}) {
					viewConfig.value.viewFlag = true
					viewConfig.value.frontFile = {
						edges, nodes
					}
				},
			},
		]
	}
})
const viewConfig = ref({
	viewFlag: false,
	frontFile: null
})
const processInfo = ref({
	processVersionId: null,
	processVersion: null,
	description: null
})
const router = useRouter()


const save = async () => {

	//获取流程ID，先查询流程信息
	// versionDiag.value.processId = props.processId

	let b = await processVersionApi.getById({
		id: processInfo.value.processVersionId
	});

	if (!versionDiag.value.processVersion) {
		message.error('请输入版本')
		return
	}

	let versionId = await processVersionApi.save({
		...versionDiag.value,
		processId: b.processId
	})

	//保存版本信息

	await processVersionContentApi.saveXml({
		id: versionId,
		frontFile: versionDiag.value.frontFile
	})


	router.push({
		path: '/process/flow',
		query: {
			id: versionId
		}
	})
}
const versionDiag = ref({
	visible: false
})
const {proxy} = getCurrentInstance();

const flowRef = ref()

onMounted(() => {
	if (props.id) {
		processInfo.value.processVersionId = props.id
	} else {
		processInfo.value.processVersionId = proxy.$route.query.id
	}
});

</script>

<style scoped></style>
